<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三题</title>
    <style type="text/css">
        * {
            margin: auto;
        }

        #t_div button {
            height: 26px;
            width: 50px;
            margin-left: 2px;
            border: none;
            background-color: #eeeeee;
            border-radius: 5px;
            color: #4a4a4a;
            font-size: 12px;
        }

        #table td {
            border: 1px solid #d3d3d3;
            height: 20px;
        }

        .td1 {
            width: 50px;
        }

        .td2 {
            width: 50px;
        }

        .td3 {
            width: 100px;
        }

        .td4 {
            width: 50px;
        }

        .table td {
            font-size: 12px;
            border: 1px solid #d3d3d3;
        }

        .x_td1 {
            border-radius: 3px;
            background-color: #eeeeee;
            width: 70px;
            text-align: right;
        }

        .x_td2 {
            border: none;
            width: 120px;
        }

        .x_td2 input {
            width: 120px;
            border: none;
        }
        .dibu button{
            font-size: 12px;
            height: 20px;
            border: none;
            background-color: #eeeeee;
            border-radius: 5px;
            color: #484848;
        }

    </style>
    <script>
        var $ = function (id) {
            return document.getElementById(id);
        };
        var i = 1;
        var _row;
        //var _id,_name,_sex,_remark;


        var list = [
            {id:i++, name: '张三',sex: 1, remark:'备注'},
            {id:i++, name:'李四', sex: 0, remark:'备注'},
            {id:i++, name:'王五', sex: 1, remark:'备注'},
            {id:i++, name:'赵六', sex: 0, remark:'备注'},
            {id:i++, name:'李大婶', sex: 1, remark:'备注'},
            {id:i++, name:'赵大爷', sex: 0, remark:'备注'},
            {id:i++, name:'王二狗', sex: 1, remark:'备注'},
            {id:i++, name:'三姑', sex: 0, remark:'备注'},
            {id:i++, name:'六婆', sex: 1, remark:'备注'},
            {id:i++, name:'大傻子',sex:  0, remark:'备注'},
            {id:i++, name:'李四', sex: 0, remark:'备注'},
            {id:i++, name:'王五', sex: 1, remark:'备注'},
            {id:i++, name:'赵六', sex: 0, remark:'备注'}
        ];
        //构建表格
            var _table = function (d) {
            //获取表格
            var table1 = document.getElementById('table');
            //清除表格原有数据 rows 表示所有的行对象
            while (table1.rows.length > 1){
                //deleteRow(参数 指的是 要删除的行数)
                table1.deleteRow(table1.rows.length - 1);
            }
            //遍历数组
            for (var a = 0; a < d.length; a++) {
                //tr
                var row = table1.insertRow(-1);
                //背景颜色变化
                row.onmouseover = function () {
                    if (this != _row){
                        this.style.backgroundColor = '#efefef';
                    }
                };
                row.onmouseout = function () {
                    if(this !=_row){
                        this.style.backgroundColor = '';
                    }
                };
                row.onclick = function () {
                    if(_row){
                        _row.style.backgroundColor = '';
                    }
                    this.style.backgroundColor = '#cdcdcd';
                    _row = this;
                };
                row._id =d[a].id;
                row._name =d[a].name;
                row._sex =d[a].sex;
                row._remark =d[a].remark;

                //td>复选框
                var cell = row.insertCell(-1);
                cell.innerHTML = '<input type = "checkbox" style="margin-top:5px;" class = "chkbox" value="' +d[a].id +'"/>';
                //序号
                cell =row.insertCell(-1);
                cell.innerText = d[a].id;
                //td>名称
                cell = row.insertCell(-1);
                cell.innerText = d[a].name;
                //td>性别
                cell = row.insertCell(-1);
                cell.innerText = d[a].sex ? '男' : '女';
                //备注
                cell =row.insertCell(-1);
                cell.innerText =d[a].remark;
            }
        };

/*            //10行
           page_num =10;
           //记录当前页数
            //page = p;
            //一共有几页
            //grid_page = Math.ceil(grid_data.length / page_num);

            //先清除数据
            //clear();

            //填充数据
           var turnPage = function (page) {
               var reArr =[];
           var start = page_num *( page - 1);
           for (var i = 0; i < page_num; i++) {
               if ( list[start]){
                   reArr.push(list[start++])
               }
           }
           return reArr;

       };*/
        //表格的数据 | 总的页数 | 默认每页笔数 | 当前是第几页
        var grid_page = 0, page_num = 5, page = 0;
        //表格的对象
        var grid_obj;
        //清除数据
        var clear = function() {
            //如果表格的行数 > 1的话
            while (grid_obj.rows.length > 1) {
                grid_obj.deleteRow(-1);
            }
        };


        //分页的方法 默认每页10笔数据
        var goPage = function(p) {
            //记录当前页数
            page = p;
            //一共有几页
            grid_page = Math.ceil(list.length / page_num);

            //先清除数据
            clear();

            //填充数据
            var start = (p - 1) * page_num;
            var aa = [];
            for (var i = 0; i < page_num; i++) {

                if (list[start]) {
                    aa.push(list[start++])
                }

            }
            _table(aa);

            document.getElementById('spaNum').innerText = page;
            document.getElementById('spaAll').innerText = grid_page;
        };

            //document.getElementById('spaNum').innerText = page;
            //document.getElementById('spaAll').innerText = grid_page;
            /*var his = window.history;
        his.forward();//向后一页
        his.back();//向前一页
        his.go(0);//去往哪一页 如 -2 前两页 3 向后三页*/
        window.onload = function () {

            grid_obj = document.getElementById('table');

            //要获取服务后台的数据库中的商品分类的数据
            //回调方法
            //  向后台请求完成之后 所要调用的方法或事件 d -> 就是服务端 返回 页面的数据

                    page = 1;
                    goPage(page);

            //分页按钮事件
            document.getElementById('btnHome').onclick = function() {
                if (
                    1 == page) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    goPage(1);
                }
            };
            document.getElementById('btnPrev').onclick = function() {
                if (1 == page) {
                    alert('已经是第一页!');
                    return false;
                } else {
                    goPage(--page);
                }
            };
            document.getElementById('btnNext').onclick = function() {
                if (page == grid_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    goPage(++page);
                }
            };
            document.getElementById('btnLast').onclick = function() {
                if (page == grid_page) {
                    alert('已经到最后一页!');
                    return false;
                } else {
                    goPage(grid_page);
                }
            };
            //分页按钮事件

            document.getElementById('selPageNum').onchange = function() {
                page_num = this.value;
                goPage(1);
            };


            //查询
            document.getElementById('btn4').onclick = function () {
                //抓取input输入框的值
                var _name = document.getElementById('txt1').value;
                //声明
                var _ =[];
                //遍历数组
                for (var i=0; i< list.length; i++) {
                    //精确查询
                    /*if(list[i].name === _name){
                        _.push(list[i]);
                    }*/
                    //模糊查询
                    if(
                        list[i].name.indexOf(_name) > -1){
                        _.push(list[i]);
                    }
                }
                //刷新表格
                _table
                (_
                );
            };
            //新增
            document.getElementById(
                'btn1').onclick = function (){
                document.getElementById('xinzen').style
                    .display = 'block';

            };
            //x_x 关闭
            document.getElementById('x_x').onclick = function () {
                document.getElementById('xinzen').style.display = 'none';
            };
            document.getElementById('guanbi').onclick = function () {
                document.getElementById(
                    'xinzen').style.display = 'none';
            };
            //保存按钮

            document.getElementById('baocun').onclick = function () {
                var name2 = document.getElementById('input2').value;
                var remark3 = document.getElementById('input3').value;
                var sex2 = document.getElementById('sex').value;list.push({
                        id:i++,
                        name:name2,
                    sex :sex2,
                    remark:remark3
                    });
                _table(list);
                document.getElementById('xinzen').style.display = 'none';
            };

            //编辑
            document.getElementById('btn2').onclick = function (){
                document.getElementById('bianji').style.display = 'block';
                document.getElementById('input4').value =  _row._id;
                document.getElementById('input5').value = _row._name;
                document.getElementById('sex2').value = _row._sex;
                document.getElementById('input6').value = _row._remark;
            };
            //x_x2 关闭2
            document.getElementById('x_x2').onclick =
                function () {
                document.getElementById('bianji').style.display =
                    'none';
            };
            document.getElementById(
                'guanbi2').onclick =
                function () {
                document.getElementById('bianji').style.display = 'none';
            };
            //编辑的保存
            document.getElementById('baocun2').onclick =
                function () {
                var id = document.getElementById('input4').value;
                var name5 = document.getElementById(
                    'input5').value;
                var remark6 = document.getElementById('input6').value;
                var sex2 = document.getElementById('sex').value
                    ;
                    if(_row){
                    for (var i =0
                        ;i
                         <list.length;i++){
                        if(list[i].id === id - 0){
                            list[i].name = name5;
                            list[i]
                                .sex = sex2
                            ;
                            list
                                [i].remark = remark6;
                            break;
                        }
                    }
                    document.getElementById('bianji'
                    ).style.display = 'none';
                        _table(list);
                }else {
                    alert('请先选择！');
                }
            };
            //删除的按钮事件
            document.getElementById('btn3').onclick =
                function () {
                var ids = [];
                var _ =
                    document.getElementsByClassName('chkbox');

                var
                    status = false;
                for (var i =0;i <_.length;i++){
                    if (_[i].checked){
                        ids.push(_[i].value)
                        ;
                        status =
                            true;
                    }
                }
                if (status) {
                    if (confirm(
                            '你确定要删除吗？')) { /* var newlist = [];
                        for (varj= 0;j< list.length;j++){
                            var bl= false;
                            for (var i =0;i <ids.length;i++){
                                if(list[j].id ==ids[i] - 0){
                                    bl = true;
                                }
                            }
                            if (!bl){
                                newlist.push(list[j]);
                            }
                        }
                        list = newlist;
                        for (var j = 0;j <list.length;j++){
                            for (var  i = 0;i<ids.length;i++){
                                if (data[j].id == ids[i] - 0){
                                    bl = true;
                                }
                            }
                        }*/
                        ids = ids.reverse();
                        for (var i = 0; i < ids.length; i++) {
                            for (var j = 0; j < list.length; j++) {
                                if (list[j].id == ids[i] - 0) {
                                    list.splice(j, 1);
                                }
                            }
                        }
                        _table(list);
                    }
                }else {
                    alert(
                        "请先选择数据！");
                }
                };

            var list2 =
                document.getElementsByClassName('chkbox');
            document.getElementById('quan').onclick = function () {
                for (var i = 0; i < list2.length; i++) {
                    if (list2[i].type == "checkbox") {
                        if (quan.checked == true) {
                            list2[i].checked = true;
                        } else {
                            list2[i].checked = false;
                        }
                    }
                }
            };
            //分页点击
        }
    </script>
</head>
<body>
<div style="border: 1px solid #d3d3d3;height:28px;width: 800px;line-height: 28px;background-color: #eeeeee;border-radius: 5px;font-size: 12px;color: #4a4a4a">
    　<img src="../img/seach_03.png" style="height: 9px;width: 12px;"> 查询
</div>
<div style="border-right: 1px solid #aaaaaa;border-left: 1px solid #aaaaaa;border-bottom: 1px solid #aaaaaa;width: 800px;height: 40px;line-height: 40px;text-indent: 25px;font-size: 12px;color: #4a4a4a;margin-bottom: 10px; ">
    名称: <input id="txt1" type="text" style="width: 50px;"/>
    <button id="btn4" style="height: 30px;width: 60px;font-size: 12px;"><img src="../img/seach_03.png"
                                                                   style="height: 9px;width: 12px;"> 查询
    </button>
</div>
<div id="t_div"
     style="height: 28px;width: 800px;border: 1px solid  #aaaaaa;text-indent: 25px;line-height: 26px;background-color: #cdcdcd;border-top-left-radius: 5px;border-top-right-radius: 5px;">
    <button id="btn1">新增</button>
    <button id="btn2">编辑</button>
    <button id="btn3">删除</button>
</div>
<table id="table" style="border:0 none;border-collapse: collapse;width: 802px;text-align: center;font-size: 12px;">
    <tr>
        <td class="td1" style="background-color: #eeeeee;"><input type="checkbox" style="margin-top: 5px;" id="quan" class="chkbox"/></td>
        <td class="td2" style="background-color: #eeeeee;">序号</td>
        <td class="td3" style="background-color: #eeeeee;">姓名</td>
        <td class="td4" style="background-color: #eeeeee;">性别</td>
        <td class="td5" style="background-color: #eeeeee;">说明</td>
    </tr>
</table>
<div class="dibu" id="didiv" style="height: 24px;line-height:24px;width: 800px;background-color: #e7e7e7;border-bottom: 1px solid #d3d3d3;border-left: 1px solid #d3d3d3;border-right: 1px solid #d3d3d3;font-size: 12px;color: #9a9a9a;text-align: center;">
    第<span id='spaNum'></span>页 / 一共有<span id='spaAll'></span>页&nbsp;
    <button id='btnHome'>首页</button>
    <button id='btnPrev'>上页</button>
    &nbsp;
    <button id='btnNext'>下页</button>
    <button id='btnLast'>末页</button>
    <select id='selPageNum'>
    <option value=5>5</option>
    <option value=10>10</option>
    <option value=20>20</option>
</select>
</div>
<div id="xinzen" style="display: none;">
    <div style="width: 400px;height: 120px;border: 1px solid gainsboro;border-radius: 5px;">
        <div style="text-indent: 15px;height: 20px;line-height: 20px; width: 394px;border: 1px solid gainsboro;border-radius: 5px;margin-top: 3px; font-size: 12px;font-weight:bold;background-color: #d9d9d9">
            新增
            <div id="x_x" style="float: right;margin-right: 15px;cursor: pointer;height: 20px;width: 20px;">X</div>
        </div>
        <table style="width: 380px;margin-top: 8px;" class="table">
            <tr>
                <td class="x_td1">ID</td>
                <td class="x_td2"><input type="text" readonly id="input1" value="系统自动生成" style="color: #6f6f6f;"/></td>
                <td class="x_td1">姓名</td>
                <td class="x_td2"><input type="text"id="input2"  class="name"/></td>
            </tr>
            <tr>
                <td class="x_td1">性别</td>
                <td class="x_td2">
                    <select class='select' id="sex"  style="width: 120px;border: none;">
                        <option value=1>男</option>
                        <option value=0>女</option>
                    </select>
                </td>
                <td class="x_td1">备注</td>
                <td class="x_td2"><input type="text" id="input3"  class="beizhu"/></td>
            </tr>
        </table>
        <div style='text-align:center;margin-top:5px'>
            <button type='button' id="baocun">保存</button>
            <button type='button' id="guanbi">关闭</button>
        </div>
    </div>
</div>

<div id="bianji" style="display: none;">
    <div style="width: 400px;height: 120px;border: 1px solid gainsboro;border-radius: 5px;">
        <div style="text-indent: 15px;height: 20px;line-height: 20px; width: 394px;border: 1px solid gainsboro;border-radius: 5px;margin-top: 3px; font-size: 12px;font-weight:bold;background-color: #d9d9d9">
            编辑
            <div id="x_x2" style="float: right;margin-right: 15px;cursor: pointer;height: 20px;width: 20px;">X</div>
        </div>
        <table style="width: 380px;margin-top: 8px;" class="table">
            <tr>
                <td class="x_td1">ID</td>
                <td class="x_td2"><input type="text" readonly id="input4" value="系统自动生成" style="color: #6f6f6f;"/></td>
                <td class="x_td1">姓名</td>
                <td class="x_td2"><input type="text" id="input5"  class="name"/></td>
            </tr>
            <tr>
                <td class="x_td1">性别</td>
                <td class="x_td2">
                    <select class='select' id="sex2"  style="width: 120px;border: none;">
                        <option value=1>男</option>
                        <option value=0>女</option>
                    </select>
                </td>
                <td class="x_td1">备注</td>
                <td class="x_td2"><input type="text" id="input6"  class="beizhu"/></td>
            </tr>
        </table>
        <div style='text-align:center;margin-top:5px'>
            <button type='button' id="baocun2">保存</button>
            <button type='button' id="guanbi2">关闭</button>
        </div>
    </div>
</div>
</body>
</html>